<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<div class="form-header ml30">
					{{
						$t(
							'funds.proxy_member_funds_record.bill_related_settings'
						)
					}}
				</div>
				<el-divider></el-divider>
				<div class="billSettingContent">
					<el-button
						v-if="hasPermission('90060044')"
						class="btnEdit"
						type="primary"
						size="mini"
						@click="editBillSet"
					>
						{{ $t('common.edit') }}
					</el-button>
					<el-form ref="formRef" :model="queryData" :rules="rules">
						<el-row class="flex-row-container">
							<el-form-item
								:label="
									`${$t(
										'funds.proxy_member_funds_record.settlement_cycle'
									)}`
								"
								label-width="130px"
								prop=""
								disabled
							>
								<el-select
									:placeholder="$t('common.please_choose')"
									:value="periodRange"
									clearable
									:popper-append-to-body="false"
									disabled
								>
									<el-option
										:label="
											$t(
												'funds.proxy_member_funds_record.period_range_7d'
											)
										"
										:value="periodRange"
									></el-option>
								</el-select>
							</el-form-item>

							<!-- <el-form-item prop="periodHour" class="ml10">
								<el-select
									v-model="queryData.periodHour"
									:placeholder="$t('common.please_choose')"
									clearable
									:popper-append-to-body="false"
									:disabled="true"
									style="width:150px"
								>
									<el-option
										v-for="item in timeOptionList"
										:key="item.code"
										:label="`${item.description}:00`"
										:value="Number(item.code)"
									></el-option>
								</el-select>
							</el-form-item>
							<el-popover
								placement="top-start"
								min-width="450"
								trigger="hover"
								content="结算周期将同时影响借还款账单结算周期和返点模式保险分成结算周期"
							>
								<span slot="reference">
									<i
										class="el-icon-warning-outline showPopoverIcon"
									></i>
								</span>
							</el-popover> -->
						</el-row>
						<el-form-item
							prop="periodDayOfweek"
							class="current_spetify_item required"
						>
							<label
								for=""
								class="el-form-item__label current_spetify required"
								width="130px"
							>
								{{
									$t(
										'funds.proxy_member_funds_record.settlement_date'
									)
								}}
								<el-tooltip
									class="item"
									effect="dark"
									placement="top"
								>
									<i class="el-icon-question"></i>
									<div slot="content">
										<p>
											{{
												$t(
													'funds.proxy_member_funds_record.period_date_tip'
												)
											}}
										</p>
									</div>
								</el-tooltip>
							</label>
							<el-select
								v-model="queryData.periodDayOfweek"
								:placeholder="$t('common.please_choose')"
								clearable
								:popper-append-to-body="false"
								:disabled="disableEdit"
							>
								<el-option
									v-for="item in weekList"
									:key="item.code"
									:label="item.description"
									:value="item.code"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item
							prop="periodHour"
							show-overflow-tooltip
							class="current_spetify_item required"
						>
							<label
								for=""
								class="el-form-item__label current_spetify required"
								width="130px"
							>
								{{
									$t(
										'funds.proxy_member_funds_record.settlement_time'
									)
								}}
								<el-tooltip
									class="item"
									effect="dark"
									placement="top"
								>
									<i class="el-icon-question"></i>
									<div slot="content">
										<p>
											{{
												$t(
													'funds.proxy_member_funds_record.period_time_tip'
												)
											}}
										</p>
									</div>
								</el-tooltip>
							</label>
							<el-select
								v-model="queryData.periodHour"
								:placeholder="$t('common.please_choose')"
								clearable
								:popper-append-to-body="false"
								:disabled="disableEdit"
							>
								<el-option
									v-for="item in hourList"
									:key="item.code"
									:label="item.description"
									:value="item.code"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item
							:label="
								`${$t(
									'funds.proxy_member_funds_record.current_day_withdrawals_times'
								)}`
							"
							label-width="130px"
							prop="withdrawDailyMaxCount"
						>
							<el-input
								v-model="queryData.withdrawDailyMaxCount"
								clearable
								v-input="{ name: 'intp' }"
								:placeholder="$t('common.please_enter')"
								:disabled="disableEdit"
								style="width:200px"
								@blur="validWithDrawMaxCount()"
							></el-input>
						</el-form-item>
						<el-form-item
							:label="
								`${$t(
									'funds.proxy_member_funds_record.single_transaction_withdrawal_limit'
								)}`
							"
							label-width="130px"
							prop="withdrawDailyMaxAmount"
						>
							<el-input
								v-model="queryData.withdrawDailyMaxAmount"
								type="textarea"
								autosize
								clearable
								v-input="{ name: 'intp' }"
								:placeholder="$t('common.please_enter')"
								:disabled="disableEdit"
								style="width:200px"
								required
								resize="none"
								@blur="validWithDrawMaxAmount()"
							></el-input>
						</el-form-item>
						<el-form-item class="mt60">
							<el-button
								type="primary"
								icon="el-icon-search"
								:disabled="disableEdit"
								size="medium"
								@click="handleSubmit"
								class="ml170"
							>
								{{ $t('common.submit') }}
							</el-button>
							<el-button
								icon="el-icon-refresh-left"
								:disabled="disableEdit"
								size="medium"
								@click="reset"
							>
								{{ $t('common.reset') }}
							</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		<el-dialog
			:close-on-click-modal="false"
			:visible.sync="dialogVisible"
			:destroy-on-close="true"
			:before-close="closeDialog"
			top="40vh"
			width="20%"
		>
			<div style="text-align:center">
				<i class="el-icon-success iconColor"></i>
				<br />
				<h3 class="text-center mt20">
					{{
						$t(
							'funds.proxy_member_funds_record.bill_related_settings_submit_success'
						)
					}}
				</h3>
				<br />
				<el-button type="primary" size="medium" @click="closeDialog">
					{{ $t('common.back') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { rules } from './components/rules'
import { routerNames } from '@/utils/consts'
export default {
	name: routerNames.billRelateSetting,
	mixins: [list],
	data() {
		return {
			periodRange: 7,
			periodHour: 0,
			queryData: {
				periodDayOfweek: '',
				periodHour: 0,
				withdrawDailyMaxCount: undefined,
				withdrawDailyMaxAmount: undefined
			},
			withdrawDailyMaxCountLimit: undefined,
			withdrawDailyMaxAmountLimit: undefined,
			dialogVisible: false,
			disableEdit: true,
			weekList: [
				{
					code: 1,
					description: '每周日'
				},
				{
					code: 2,
					description: '每周一'
				},
				{
					code: 3,
					description: '每周二'
				},
				{
					code: 4,
					description: '每周三'
				},
				{
					code: 5,
					description: '每周四'
				},
				{
					code: 6,
					description: '每周五'
				},
				{
					code: 7,
					description: '每周六'
				}
			],
			hourList: [
				{
					code: 0,
					description: '00:00'
				},
				{
					code: 1,
					description: '01:00'
				},
				{
					code: 2,
					description: '02:00'
				},
				{
					code: 3,
					description: '03:00'
				},
				{
					code: 4,
					description: '04:00'
				},
				{
					code: 5,
					description: '05:00'
				},
				{
					code: 6,
					description: '06:00'
				},
				{
					code: 7,
					description: '07:00'
				},
				{
					code: 8,
					description: '08:00'
				},
				{
					code: 9,
					description: '09:00'
				},
				{
					code: 10,
					description: '10:00'
				},
				{
					code: 11,
					description: '11:00'
				},
				{
					code: 12,
					description: '12:00'
				},
				{
					code: 13,
					description: '13:00'
				},
				{
					code: 14,
					description: '14:00'
				},
				{
					code: 15,
					description: '15:00'
				},
				{
					code: 16,
					description: '16:00'
				},
				{
					code: 17,
					description: '17:00'
				},
				{
					code: 18,
					description: '18:00'
				},
				{
					code: 19,
					description: '19:00'
				},
				{
					code: 20,
					description: '20:00'
				},
				{
					code: 21,
					description: '21:00'
				},
				{
					code: 22,
					description: '22:00'
				},
				{
					code: 23,
					description: '23:00'
				}
			]
		}
	},
	computed: {
		rules() {
			return rules(this)
		},
		timeOptionList() {
			return this.globalDics.timeOptionList || []
		},
		formatPeriodHour() {
			if (this.periodHour > 9) {
				return this.periodHour + '时'
			} else {
				return '0' + this.periodHour + '时'
			}
		}
	},
	watch: {},
	created() {},
	mounted() {
		this.initBillSetData()
	},
	methods: {
		validWithDrawMaxCount() {
			if (
				this.queryData.withdrawDailyMaxCount >
				this.withdrawDailyMaxCountLimit
			) {
				this.$message({
					type: 'warning',
					message: `${this.$t(
						'funds.settlement_bill_management.withdraw_maxCount_warning'
					)}${this.withdrawDailyMaxCountLimit}`
				})
				this.queryData.withdrawDailyMaxCount = undefined
			}
		},
		validWithDrawMaxAmount() {
			if (
				this.queryData.withdrawDailyMaxAmount >
				this.withdrawDailyMaxAmountLimit
			) {
				this.$message({
					type: 'warning',
					message: `${this.$t(
						'funds.settlement_bill_management.withdraw_maxAmount_warning'
					)}${this.withdrawDailyMaxAmountLimit}`
				})
				this.queryData.withdrawDailyMaxAmount = undefined
			}
		},
		editBillSet() {
			this.disableEdit = false
		},
		initBillSetData() {
			this.loading = true
			this.$api
				.getInitBillConfig()
				.then((res) => {
					const {
						periodDayOfweek,
						periodHour,
						withdrawDailyMaxCount,
						withdrawDailyMaxAmount,
						withdrawDailyMaxCountLimit,
						withdrawDailyMaxAmountLimit
					} = res.data || {}
					this.queryData.periodDayOfweek = periodDayOfweek
					this.queryData.periodHour = periodHour
					this.periodHour = periodHour
					this.queryData.withdrawDailyMaxCount = withdrawDailyMaxCount
					this.queryData.withdrawDailyMaxAmount = withdrawDailyMaxAmount
					this.withdrawDailyMaxCountLimit = withdrawDailyMaxCountLimit
					this.withdrawDailyMaxAmountLimit = withdrawDailyMaxAmountLimit
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleSubmit() {
			this.$refs.formRef.validate((valid) => {
				if (valid) {
					this.loading = true
					this.$api
						.setBillRelated({
							...this.queryData
						})
						.then((res) => {
							if (res.data === true) {
								this.dialogVisible = true
							}
							this.loading = false
							this.disableEdit = true
							this.initBillSetData()
						})
						.catch(() => {
							this.loading = false
						})
				}
			})
		},
		reset() {
			this.$refs.formRef.resetFields()
			this.withdrawDailyMaxCountLimit = undefined
			this.withdrawDailyMaxAmountLimit = undefined
		},
		closeDialog() {
			this.dialogVisible = false
		}
	}
}
</script>

<style lang="scss" scoped>
.billSettingContent {
	position: relative;
	width: 100%;
	.btnEdit {
		position: absolute;
		z-index: 2;
		right: 0;
		top: 0px;
	}
	.mt60 {
		margin-top: 145px;
	}
	.ml170 {
		margin-left: 130px;
	}
}
.iconColor {
	font-size: 48px;
	color: #67c23a;
}
.showPopoverIcon {
	padding-left: 6px;
	margin-top: 10px;
	font-size: 20px;
}

::v-deep .current_spetify_item {
	position: relative;
	> div.el-form-item__content::before {
		content: '*';
		color: #f56c6c;
		display: inline-box;
		position: absolute;
		font-size: 14px;
		font-weight: 700;
		left: 10px;
	}
}

::v-deep .current_spetify {
	width: 130px;
	.el-icon-question:after {
		font-size: 14px;
		margin-left: -3px;
	}
}
</style>
